<script setup lang="ts">
import formButton from '@renderer/components/formButton.vue'
import NavBar from '@renderer/components/navBar.vue'
import SelectExportMode from '@renderer/components/selectExportMode.vue'
import useCompute from '@renderer/composables/useCompute'
import useComputeForm from '@renderer/composables/useComputeForm'
import helper from '@renderer/utils/helper'
import { ElMessage } from 'element-plus'
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const initSubmitForm = () => ({
  cate_name: '',
  print_name: '',
  name: '',
  value: '',
  unit: '',
  main_materials: '',
  labour: '',
  auxiliary_material: '',
  remark: '',
  unit_price: '',
  house_number: '',
})
const submitForm = reactive(initSubmitForm())
const roomOptions = ref<{ value: string; label: string; house_number: number }[]>([])
const addDataDialog = ref(false)
const selectTemplateDialog = ref(false)
const totalPrice = ref(0)
const price = ref(0)
const addType = ref('')
const roomType = ref('')
const changeRow = ref<any[]>([])
const handleClose = async () => {
  Object.assign(submitForm, initSubmitForm())
  addDataDialog.value = false
  await initPage()
}
const handleAddData = async () => {
  if (changeRow.value.length) {
    await handleSaveTableData(changeRow.value, Number(pageQuery.house_type) == 2 ? 28 : 31)
    changeRow.value = []
  }
  addType.value = 'addRoomData'
  roomType.value = 'room'
  roomOptions.value = []
  roomList.value?.forEach((item) => {
    roomOptions.value.push({
      value: handleRoomName(item.cate_name, item.house_number),
      label: handleRoomName(item.cate_name, item.house_number),
      house_number: item.house_number,
    })
  })
  addDataDialog.value = true
}
const handleAddRoom = async () => {
  if (changeRow.value.length) {
    await handleSaveTableData(changeRow.value, Number(pageQuery.house_type) == 2 ? 28 : 31)
    changeRow.value = []
  }
  addType.value = 'addRoom'
  addDataDialog.value = true
}
const handleSave = async () => {
  let checkName = ''
  if (submitForm.cate_name) {
    if (
      submitForm.cate_name.includes('一层') ||
      submitForm.cate_name.includes('二层') ||
      submitForm.cate_name.includes('三层') ||
      submitForm.cate_name.includes('四层') ||
      submitForm.cate_name.includes('五层')
    ) {
      checkName = submitForm.cate_name.substring(2)
    } else {
      checkName = submitForm.cate_name
    }
  }
  if (!checkName) {
    ElMessage.error('请选择房间')
    return
  }
  if (!submitForm.name) {
    ElMessage.error('请输入项目代号')
    return
  }
  if (!submitForm.print_name) {
    ElMessage.error('请输入项目名称')
    return
  }
  if (!submitForm.value) {
    ElMessage.error('请输入数量')
    return
  }
  if (!submitForm.unit) {
    ElMessage.error('请输入单位')
    return
  }
  if (handleShowItem(checkName) && Number(pageQuery.house_type) == 2) {
    if (!unitPrice.value) {
      ElMessage.error('请输入单价')
      return
    }
    if (!submitForm.main_materials) {
      ElMessage.error('请输入主材')
      return
    }
    if (!submitForm.labour) {
      ElMessage.error('请输入人工')
      return
    }
    if (!submitForm.auxiliary_material) {
      ElMessage.error('请输入辅材')
      return
    }
  } else {
    if (!submitForm.unit_price) {
      ElMessage.error('请输入单价')
      return
    }
  }
  await addBudgetData({
    calculate_id: pageQuery.calculate_id,
    type_name: Number(pageQuery.house_type) == 2 ? '预算2' : '预算3',
    cate_name: checkName,
    name: submitForm.name,
    print_name: submitForm.print_name,
    unit: submitForm.unit,
    unit_price:
      handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2
        ? unitPrice.value
        : submitForm.unit_price,
    main_materials: submitForm.main_materials,
    labour: submitForm.labour,
    auxiliary_material: submitForm.auxiliary_material,
    remark: submitForm.remark,
    value: submitForm.value,
    house_number: submitForm.house_number,
  })
  handleClose()
}
const total = computed(() => {
  return (
    (handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2
      ? (unitPrice.value as any)
      : (submitForm.unit_price as any) * 1) *
    ((submitForm.value as any) * 1)
  ).toFixed(2)
})
const unitPrice = computed(() => {
  return (
    (submitForm.main_materials as any) * 1 +
    (submitForm.labour as any) * 1 +
    (submitForm.auxiliary_material as any) * 1
  ).toFixed(2)
})
const handleChange = (event) => {
  const roomInfo = roomOptions.value.find((item) => item.value == event)
  Object.assign(submitForm, {
    print_name: '',
    name: '',
    value: '',
    unit: '',
    main_materials: '',
    labour: '',
    auxiliary_material: '',
    remark: '',
    unit_price: '',
    house_number: roomInfo ? roomInfo.house_number : '',
  })
}
const handleShowItem = (cate_name: string, rowName: string = '') => {
  if (rowName == '小计') {
    return true
  } else {
    if (cate_name != '拆砌改' && cate_name != '主材' && cate_name != '软装电器' && cate_name != '其他') {
      return true
    } else {
      return false
    }
  }
}
const handleExport = async () => {
  selectTemplateDialog.value = true
}
const handleSaveMode = async (event) => {
  handleCloseMode()
  let res
  if (Number(pageQuery.house_type) == 2) {
    res = await exportBasic2Table({
      calculate_id: pageQuery.calculate_id,
      mode: event.mode,
    })
  } else {
    res = await exportBasic3Table({
      calculate_id: pageQuery.calculate_id,
      mode: event.mode,
    })
  }
  downLoadFile(res, '整体预算明细表.xlsx')
}
const handleCloseMode = () => {
  selectTemplateDialog.value = false
}
const handleBlueCompute = (newVal: TypeList, index: number, isCompute: boolean = false) => {
  if (isCompute) {
    if (handleShowItem(newVal.cate_name)) {
      const childIndex = roomList.value![index].list.findIndex((childItem) => childItem.name == newVal.name)
      if (childIndex != -1) {
        if (Number(pageQuery.house_type) == 2) {
          roomList.value![index].list[childIndex].unit_price =
            (Number(newVal.main_materials) + Number(newVal.labour) + Number(newVal.auxiliary_material)).toFixed(2) + ''
        }
        roomList.value![index].list[childIndex].total =
          (Number(newVal.value) * Number(newVal.unit_price)).toFixed(2) + ''
        const totalIndex = roomList.value![index].list.findIndex((childItem) => childItem.name == '小计')
        if (totalIndex != -1) {
          roomList.value![index].list[totalIndex].total_price = '0'
          roomList.value![index].list.forEach((item) => {
            if (item.name != '小计') {
              roomList.value![index].list[totalIndex].total_price =
                (Number(roomList.value![index].list[totalIndex].total_price) + Number(item.total)).toFixed(2) + ''
            }
          })
          roomList.value![index].total_price = Number(
            Number(roomList.value![index].list[totalIndex].total_price).toFixed(2),
          )
        }
      }
    } else {
      const childIndex = roomList.value![index].list.findIndex((childItem) => childItem.name == newVal.name)
      if (childIndex != -1) {
        roomList.value![index].list[childIndex].total =
          Number(Number(newVal.value) * Number(newVal.unit_price)).toFixed(2) + ''
        const totalIndex = roomList.value![index].list.findIndex((childItem) => childItem.name == '小计')
        if (totalIndex != -1) {
          roomList.value![index].list[totalIndex].total_price = '0'
          roomList.value![index].list.forEach((item) => {
            if (item.name != '小计') {
              roomList.value![index].list[totalIndex].total_price =
                (Number(roomList.value![index].list[totalIndex].total_price) + Number(item.total)).toFixed(2) + ''
            }
          })
          roomList.value![index].total_price = Number(
            Number(roomList.value![index].list[totalIndex].total_price).toFixed(2),
          )
        }
      }
    }
  }
  initTotalPrice()
  if (!changeRow.value.includes(newVal)) {
    changeRow.value.push(newVal)
  } else {
    changeRow.value = changeRow.value.filter((item) => item !== newVal)
    changeRow.value.push(newVal)
  }
}
const handleSaveData = async () => {
  if (!changeRow.value.length) {
    ElMessage({ type: 'success', message: '保存成功！' })
    return
  }
  await handleSaveTableData(changeRow.value, Number(pageQuery.house_type) == 2 ? 28 : 31)
  await initPage()
  changeRow.value = []
}
const selectedIds = ref<any[]>([])
const editIds = ref<Number[]>([])
const handleSelectionChange = (selection, index) => {
  selectedIds.value[index] = selection.map((item) => item.id)
  editIds.value = []
  selectedIds.value.forEach((item) => {
    if (item.length) {
      editIds.value = [...editIds.value, ...item]
    }
  })
}
const handleDelData = async () => {
  if (changeRow.value.length) {
    ElMessage({ type: 'error', message: '你有未保存的数据，请先保存数据在进行删除此项目。' })
    return
  }
  if (editIds.value.length) {
    await delTableData({
      calculate_id: pageQuery.calculate_id,
      ids: editIds.value,
      type: Number(pageQuery.house_type) == 2 ? 28 : 31,
    })
    await initPage()
  } else {
    ElMessage({ type: 'error', message: '请选择要删除的数据' })
  }
}
const selectable = (row: TypeList) => {
  if (row.name == '小计') {
    return false
  } else {
    return true
  }
}
const initTotalPrice = () => {
  totalPrice.value = 0
  price.value = 0
  roomList.value?.forEach((item) => {
    totalPrice.value += item.total_price * 1
    if (item.cate_name != '主材' && item.cate_name != '软装电器') {
      price.value += item.total_price * 1
    }
  })
}
const initPage = async () => {
  await getCalculateDetail({ calculate_id: pageQuery.calculate_id })
  if (calculateInfo.value?.check_gather == 2 || !checkRule('预算明细查看权')) {
    ElMessage({ type: 'error', message: '抱歉！您没有此权限' })
    return
  }
  await getBudgetList({
    calculate_id: pageQuery.calculate_id,
    type_name: Number(pageQuery.house_type) == 2 ? '预算2' : '预算3',
    client_type: 'GUI',
  })
  await getCalculateTableSet({ type: Number(pageQuery.house_type) == 2 ? 2 : 6 })
  initTotalPrice()
}
const handleRoomName = (cate_name, house_number) => {
  if ((pageQuery.house_number as any) * 1 > 1) {
    switch (house_number * 1) {
      case 1:
        return '一层' + cate_name
      case 2:
        return '二层' + cate_name
      case 3:
        return '三层' + cate_name
      case 4:
        return '四层' + cate_name
      case 5:
        return '五层' + cate_name
      default:
        return cate_name
    }
  }
  return cate_name
}
const currentHandleType = ref('')
const currentFindFatherIndex = ref(-1)
const currentFindChildIndex = ref(-1)
const previewDataList = ref<
  { name: string; remark: string; id: number; fatherIndex: number; childIndex: number; roomName: string }[]
>([])
const isAllIsExit = ref(false)
const isAllIndex = ref(0)
const handleFindReplace = () => {
  currentFindFatherIndex.value = -1
  currentFindChildIndex.value = -1
  currentHandleType.value = ''
  window.api.openWindow('findSearch', {
    title: '备注查找与替换',
    currentWindowName: 'total',
    currentPage: 'total',
  })
}
const handleFind = (content: string) => {
  const includesList = roomList.value!.flatMap((item, outerIndex) =>
    item.list
      .map((subItem, innerIndex) =>
        (subItem.remark && subItem.remark.includes(content)) ||
        (subItem.print_name && subItem.print_name.includes(content))
          ? `${outerIndex}-${innerIndex}`
          : null,
      )
      .filter((index) => index !== null),
  )

  if (!includesList.length) {
    ElMessage({ type: 'error', message: '抱歉！您的查找内容不存在！' })
    currentFindFatherIndex.value = -1
    currentFindChildIndex.value = -1
    return
  }
  if (currentFindFatherIndex.value == -1) {
    let currentIndexs = includesList[0].split('-')
    currentFindFatherIndex.value = Number(currentIndexs[0])
    currentFindChildIndex.value = Number(currentIndexs[1])
  } else {
    const currentFind = includesList.findIndex(
      (item) => item === `${currentFindFatherIndex.value}-${currentFindChildIndex.value}`,
    )
    if (currentFind == includesList.length - 1) {
      let currentIndexs = includesList[0].split('-')
      currentFindFatherIndex.value = Number(currentIndexs[0])
      currentFindChildIndex.value = Number(currentIndexs[1])
    } else {
      let currentIndexs = includesList[currentFind + 1].split('-')
      currentFindFatherIndex.value = Number(currentIndexs[0])
      currentFindChildIndex.value = Number(currentIndexs[1])
    }
  }
  let remarkIsExit =
    roomList.value![currentFindFatherIndex.value].list[currentFindChildIndex.value].remark.includes(content)
  let printNameIsExit =
    roomList.value![currentFindFatherIndex.value].list[currentFindChildIndex.value].print_name.includes(content)
  if (remarkIsExit && printNameIsExit && !isAllIsExit.value) {
    if (isAllIndex.value == 0) {
      blueInput('name')
      const currentFind = includesList.findIndex(
        (item) => item === `${currentFindFatherIndex.value}-${currentFindChildIndex.value}`,
      )
      if (currentFind == includesList.length - 1) {
        let currentIndexs = includesList[0].split('-')
        currentFindFatherIndex.value = Number(currentIndexs[0])
        currentFindChildIndex.value = Number(currentIndexs[1])
      } else {
        let currentIndexs = includesList[currentFind].split('-')
        currentFindFatherIndex.value = Number(currentIndexs[0])
        currentFindChildIndex.value = Number(currentIndexs[1])
      }
      isAllIndex.value = 1
    } else {
      blueInput('remark')
      isAllIndex.value = 0
      isAllIsExit.value = false
    }
  } else if (remarkIsExit && !printNameIsExit) {
    blueInput('remark')
  } else {
    blueInput('name')
  }
}
const handleAllFind = (content: string) => {
  const result = roomList.value!.flatMap((item, fatherIndex) =>
    item.list
      .map((subItem, childIndex) =>
        (subItem.remark && subItem.remark.includes(content)) ||
        (subItem.print_name && subItem.print_name.includes(content))
          ? {
              fatherIndex,
              childIndex,
              id: subItem.id,
              name: subItem.name,
              remark: subItem.remark,
              roomName: handleRoomName(item.cate_name, item.house_number),
            }
          : null,
      )
      .filter((index) => index !== null),
  )

  if (!result.length) {
    ElMessage({ type: 'error', message: '抱歉！您的查找内容不存在！' })
    currentFindFatherIndex.value = -1
    currentFindChildIndex.value = -1
    window.api.sendListArray(JSON.stringify([]))
    return
  }
  previewDataList.value = result
  window.api.sendListArray(JSON.stringify(result))
}
window.api.acceptSendMsg((handleType, currentPage, content, replaceContent, ids) => {
  if (currentPage == 'total') {
    switch (handleType) {
      case 'handleFind':
        if (currentHandleType.value == 'handleAllFind') {
          currentFindFatherIndex.value = -1
          currentFindChildIndex.value = -1
        }
        handleFind(content)
        break
      case 'handleAllFind':
        currentFindFatherIndex.value = -1
        currentFindChildIndex.value = -1
        handleAllFind(content)
        break
      case 'handleReplace':
      case 'handleAllReplace':
        if (ids) {
          let selectIdList = ids.split(',')
          selectIdList.forEach((idItem) => {
            const index = previewDataList.value!.findIndex((item) => item.id == Number(idItem))
            handlePlaceRemark(
              previewDataList.value![index].fatherIndex,
              previewDataList.value![index].childIndex,
              roomList.value![previewDataList.value![index].fatherIndex].list[previewDataList.value![index].childIndex]
                .remark,
              roomList.value![previewDataList.value![index].fatherIndex].list[previewDataList.value![index].childIndex]
                .print_name,
              content,
              replaceContent,
            )
          })
        } else {
          if (currentFindFatherIndex.value == -1) {
            ElMessage({ type: 'error', message: '抱歉！未找到匹配的数据！' })
            return
          }
          handlePlaceRemark(
            currentFindFatherIndex.value,
            currentFindChildIndex.value,
            roomList.value![currentFindFatherIndex.value].list[currentFindChildIndex.value].remark,
            roomList.value![currentFindFatherIndex.value].list[currentFindChildIndex.value].print_name,
            content,
            replaceContent,
          )
          currentFindFatherIndex.value = -1
          currentFindChildIndex.value = -1
        }
        break
    }
    currentHandleType.value = handleType
  }
})
const handlePlaceRemark = (index, index1, checkRemarkContent, checkNameContent, content, replaceContent) => {
  if (checkRemarkContent.includes(content) && !checkNameContent.includes(content)) {
    roomList.value![index].list[index1].remark = roomList.value![index].list[index1].remark.replace(
      content,
      replaceContent!,
    )
  } else if (!checkRemarkContent.includes(content) && checkNameContent.includes(content)) {
    roomList.value![index].list[index1].print_name = roomList.value![index].list[index1].print_name!.replace(
      content,
      replaceContent!,
    )
  } else {
    roomList.value![index].list[index1].remark = roomList.value![index].list[index1].remark.replace(
      content,
      replaceContent!,
    )
    roomList.value![index].list[index1].print_name = roomList.value![index].list[index1].print_name!.replace(
      content,
      replaceContent!,
    )
  }
  handleBlueCompute(roomList.value![index].list[index1], currentFindFatherIndex.value)
}
const blueInput = (type: 'remark' | 'name') => {
  let handleRef = `${type}Input${roomList.value![currentFindFatherIndex.value].list[currentFindChildIndex.value].id}`
  const handleRefDom = document.getElementById(handleRef)
  if (handleRefDom) handleRefDom.focus()
}
const { roomList, getBudgetList, addBudgetData, exportBasic2Table, exportBasic3Table } = useCompute()
const { downLoadFile, handleSaveTableData, checkRule } = helper()
const {
  getCalculateTableSet,
  calculateSetInfo,
  getCalculateDetail,
  calculateInfo,
  delTableData,
  changeBudgetDataSort,
} = useComputeForm()
await initPage()
const handleSortData = async (event, { e }) => {
  if (event[e.newIndex].name == '小计') {
    ElMessage.error('此次移动仅为方便查看金额，不做排序处理！')
    return
  }
  await changeBudgetDataSort({
    id: event[e.newIndex].id,
    calculate_id: pageQuery.calculate_id,
    type_name: Number(pageQuery.house_type) == 2 ? '预算2' : '预算3',
    sort: e.newIndex,
  })
}
</script>

<template>
  <main class="bg-white flex flex-col" style="height: -webkit-fill-available">
    <div class="flex flex-1 justify-center" v-if="calculateInfo?.check_gather == 2 || !checkRule('预算明细查看权')">
      <el-empty
        image="https://cw3.obs.cn-north-4.myhuaweicloud.com/api/uploads/images/b1ed1d14709b890118b4c2b3da9114b351e11b9d.png"
        description="抱歉！您没有此权限" />
    </div>
    <section v-else class="flex flex-col overflow-hidden">
      <div class="px-6 h-[50px] border-b flex items-center bg-white" style="width: -webkit-fill-available">
        <div class="flex gap-3">
          <formButton @click="handleAddRoom" v-if="checkRule('预算明细修改权')">添加房间</formButton>
          <formButton @click="handleAddData" v-if="checkRule('预算明细修改权')">添加项目</formButton>
          <formButton @click="handleSaveData" v-if="checkRule('预算明细修改权')">保存数据</formButton>
          <formButton @click="handleDelData" v-if="checkRule('预算明细修改权') && editIds.length">
            删除数据
          </formButton>
          <formButton @click="handleExport">导出</formButton>
          <formButton @click="handleFindReplace" v-if="checkRule('预算明细修改权')">查找替换</formButton>
        </div>
      </div>
      <div class="flex flex-col gap-1 p-6 pt-4 overflow-y-auto flex-1">
        <div class="flex flex-col">
          <div class="text-center font-bold text-2xl text-black mt-3 mb-1">{{ calculateSetInfo?.title }}</div>
          <div class="text-center text-sm text-[#888888]">工程地址：{{ pageQuery.calculate_name }}</div>
        </div>
        <div class="flex flex-col gap-1">
          <div class="font-bold text-xl text-black">
            总工程(基装工程+主材+软装电器 工程总造价：{{ totalPrice.toFixed(2) }})
          </div>
          <div class="font-bold text-base text-black">基装工程(基装工程总合计：{{ price.toFixed(2) }})</div>
          <div class="flex flex-col gap-5">
            <div class="flex flex-col gap-1" v-for="(item, index) in roomList" :key="index">
              <span class="text-sm text-black">
                {{ index + 1 }}、{{ handleRoomName(item.cate_name, item.house_number) }}
              </span>
              <el-draggable-table
                @sort-data="handleSortData"
                :draggable-props="{
                  handle: '.move',
                }"
                :data="item.list"
                border
                header-align="center"
                @selection-change="handleSelectionChange($event, index)"
                :header-cell-style="{ background: '#FFF4E5', fontSize: '14px', color: '#888', fontWeight: '400' }">
                <el-table-column type="selection" width="40" align="center" :selectable="selectable" />
                <el-table-column type="index" label="序号" align="center" width="56" prop="drag" class-name="move" />
                <el-table-column prop="name" label="项目代号" align="center" width="110" />
                <el-table-column prop="print_name" label="项目名称" align="center" width="110">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.print_name"
                      :id="`nameInput${scope.row.id}`"
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index)" />
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" align="center" width="75">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.unit"
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index)" />
                  </template>
                </el-table-column>
                <el-table-column prop="value" label="数量" align="center" width="92">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.value"
                      type="number"
                      @mousewheel.native.prevent
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index, true)" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="unit_price"
                  :label="
                    !handleShowItem(item.cate_name, '通用') || Number(pageQuery.house_type) == 3 ? '单价' : '综合单价'
                  "
                  align="center"
                  width="90">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.unit_price"
                      type="number"
                      @mousewheel.native.prevent
                      v-if="
                        (!handleShowItem(item.cate_name, scope.row.name) || Number(pageQuery.house_type) == 3) &&
                        checkRule('预算明细修改权') &&
                        scope.row.name != '小计'
                      "
                      @input="handleBlueCompute(scope.row, index, true)" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="main_materials"
                  label="主材"
                  align="center"
                  v-if="handleShowItem(item.cate_name) && Number(pageQuery.house_type) == 2"
                  width="72">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.main_materials"
                      type="number"
                      @mousewheel.native.prevent
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index, true)" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="labour"
                  label="人工"
                  align="center"
                  v-if="handleShowItem(item.cate_name) && Number(pageQuery.house_type) == 2"
                  width="72">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.labour"
                      type="number"
                      @mousewheel.native.prevent
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index, true)" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="auxiliary_material"
                  label="辅材"
                  align="center"
                  v-if="handleShowItem(item.cate_name) && Number(pageQuery.house_type) == 2"
                  width="72">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.auxiliary_material"
                      type="number"
                      @mousewheel.native.prevent
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      @input="handleBlueCompute(scope.row, index, true)" />
                  </template>
                </el-table-column>
                <el-table-column label="合计" align="center" width="100">
                  <template #default="scope">
                    {{ scope.row.name == '小计' ? scope.row.total_price : scope.row.total }}
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                  <template #default="scope">
                    <el-input
                      v-if="scope.row.name != '小计' && checkRule('预算明细修改权')"
                      v-model="scope.row.remark"
                      :id="`remarkInput${scope.row.id}`"
                      @input="handleBlueCompute(scope.row, index)" />
                  </template>
                </el-table-column>
              </el-draggable-table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <el-dialog v-model="addDataDialog" width="500" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col pb-4">
        <NavBar @handleClose="handleClose" title="新增项目数据" />
        <el-form :model="submitForm" class="px-6 pt-6 flex flex-col gap-6" label-width="90">
          <el-form-item label="所属房间:" required>
            <el-select
              v-model="submitForm.cate_name"
              placeholder="请选择"
              v-if="addType == 'addRoomData'"
              @change="handleChange">
              <el-option v-for="item in roomOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-model="submitForm.cate_name" placeholder="请输入" clearable v-else />
          </el-form-item>
          <el-form-item label="项目代号:" required>
            <el-input v-model="submitForm.name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="项目名称:" required>
            <el-input v-model="submitForm.print_name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="单位:" required>
            <el-input v-model="submitForm.unit" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="数量:" required>
            <el-input
              v-model="submitForm.value"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent />
          </el-form-item>
          <el-form-item
            label="主材:"
            required
            v-if="handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2">
            <el-input
              v-model="submitForm.main_materials"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent />
          </el-form-item>
          <el-form-item
            label="人工:"
            required
            v-if="handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2">
            <el-input
              v-model="submitForm.labour"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent />
          </el-form-item>
          <el-form-item
            label="辅材:"
            required
            v-if="handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2">
            <el-input
              v-model="submitForm.auxiliary_material"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent />
          </el-form-item>
          <el-form-item label="单价:" required>
            <el-input
              v-model="unitPrice"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent
              disabled
              v-if="handleShowItem(submitForm.cate_name) && Number(pageQuery.house_type) == 2" />
            <el-input
              v-model="submitForm.unit_price"
              placeholder="请输入"
              clearable
              type="number"
              @mousewheel.native.prevent
              v-else />
          </el-form-item>
          <el-form-item label="合计:" required>
            <el-input v-model="total" placeholder="请输入" clearable disabled />
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="submitForm.remark" placeholder="请输入" clearable />
          </el-form-item>
          <div class="flex justify-center" @click="handleSave">
            <div class="save-button">提交</div>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <SelectExportMode
      :selectTemplateDialog="selectTemplateDialog"
      :openCate="Number(pageQuery.house_type) == 2 ? '整体预算导出模板' : '整体预算2导出模板'"
      @handleSaveMode="handleSaveMode"
      @handleCloseMode="handleCloseMode" />
  </main>
</template>

<style lang="scss" scoped>
.el-form {
  display: flex;
}

.el-form-item {
  margin-bottom: 0px;
  margin-right: 20px !important;
  flex: 1;
}

::v-deep .el-dialog__header {
  padding-bottom: 0 !important;
}

.save-button {
  @apply text-white px-16 py-3 rounded-md cursor-pointer;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
</style>
